<template>
  <dys-modal
    :open="open"
    :title="t('菜单功能')"
    :width="800"
    @cancel="emit('cancel')"
    :footer="false"
  >
    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-row>
        <a-col :span="12">
          <a-form-item :label="t('菜单名称')">
            <a-input :value="model?.menuName" disabled></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :label="t('菜单编码')">
            <a-input :value="model?.menuCode" disabled></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <dys-table
      :columns="columns"
      :data-source="state.list"
      :loading="state.loading"
      :pagination="false"
      @reload="reload"
    >
      <template #extraLeft>
        <a-button type="primary" @click="handleAdd">
          <PlusCircleOutlined />
          {{ t("新增") }}
        </a-button>
      </template>
      <template #bodyCell="{ record, column, text }">
        <template v-if="editRecord && record.id == editRecord.id">
          <a-form-item v-if="column.dataIndex == 'functionName'">
            <popup-function
              v-model:value="editRecord.functionId"
              size="small"
              @bring="handleFnBring"
            ></popup-function>
          </a-form-item>
          <span v-if="column.dataIndex == 'functionCode'">{{
            functionInfo?.functionCode
          }}</span>
          <component
            v-else-if="
              column.dataIndex == 'functionIcon' && functionInfo?.functionIcon
            "
            :is="functionInfo?.functionIcon"
          />
          <span
            v-else-if="
              column.dataIndex == 'localeKey' && functionInfo?.localeKey
            "
            >{{ t(functionInfo?.localeKey) }}</span
          >
          <template v-else-if="column.dataIndex == 'operation'">
            <a-button type="link" size="small" @click="handleSave">{{
              t("保存")
            }}</a-button>
            <a-button type="link" size="small" @click="handleCancel(record)">{{
              t("取消")
            }}</a-button>
          </template>
        </template>
        <template v-else>
          <span v-if="column.dataIndex == 'localeKey' && text">{{
            t(text)
          }}</span>
          <template v-else-if="column.dataIndex == 'operation'">
            <a-button type="link" size="small" @click="handleEdit(record)">{{
              t("编辑")
            }}</a-button>
            <a-button
              type="link"
              size="small"
              @click="handleDelete(record)"
              danger
            >
              {{ t("删除") }}
            </a-button>
          </template>
        </template>
      </template>
    </dys-table>
  </dys-modal>
</template>
<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { reactive, ref, watch } from "vue";
import { message } from "ant-design-vue";
import { useFetchList } from "@/hook/useFetchList";
import {
  addFunction,
  delFunction,
  queryFunctionList,
  updateFunction,
} from "@/api/system/menu";
import type { FnModalProps } from "../typing";
import type { TableColumnsType } from "ant-design-vue";
import type { QueryResult } from "@/api/system/function/typing";
import type {
  MenuFunctionParams,
  QueryMenuFunctionParams,
  QueryMenuFunctionResult,
} from "@/api/system/menu/typing";
import PopupFunction from "@/components/popup-function/index.vue";
const props = defineProps<FnModalProps>();
const emit = defineEmits(["cancel"]);
const { t } = useI18n();
const columns = reactive<TableColumnsType>([
  {
    title: () => t("功能名称"),
    dataIndex: "functionName",
    width: 160,
  },
  {
    title: () => t("功能编码"),
    dataIndex: "functionCode",
    width: 160,
  },
  {
    title: () => t("功能图标"),
    dataIndex: "functionIcon",
    width: 80,
  },
  { title: () => t("国际化名称"), dataIndex: "localeKey", width: 160 },
  {
    title: () => t("操作"),
    dataIndex: "operation",
    fixed: "right",
    width: 120,
  },
]);
const params = reactive<QueryMenuFunctionParams>({
  menuId: props.model?.menuId,
});
const { state, reload } = useFetchList(queryFunctionList, {
  params,
  autoFetch: false,
  onLoad: () => reset(),
});
/**带出功能信息 */
const functionInfo = ref<QueryResult>();
/**功能带出 */
const handleFnBring = (_v: string, row: QueryResult) => {
  functionInfo.value = row;
};
const reset = () => {
  editRecord.value = null;
  functionInfo.value = null;
};
/**默认行 */
const initValue = (): MenuFunctionParams => ({
  id: null,
  menuId: props.model?.menuId,
  functionId: null,
});
const editRecord = ref<MenuFunctionParams>();
/**新增 */
const handleAdd = () => {
  if (editRecord.value) {
    return message.warning(t("请先保存正在编辑的行"));
  }
  editRecord.value = initValue();
  state.list.unshift(editRecord.value as any);
};
/**修改 */
const handleEdit = (record: QueryMenuFunctionResult) => {
  if (editRecord.value) {
    return message.warning(t("请先保存正在编辑的行"));
  }
  editRecord.value = record;
};
/**保存 */
const handleSave = async () => {
  state.loading = true;
  const { success } = await (editRecord.value.id
    ? updateFunction
    : addFunction)(editRecord.value);
  state.loading = false;
  if (success) {
    message.success(t(editRecord.value.id ? "修改成功" : "新增成功"));
    reload();
    reset();
  }
};
/**删除 */
const handleDelete = async (record: QueryMenuFunctionResult) => {
  state.loading = true;
  const { success } = await delFunction({ id: record.id });
  state.loading = false;
  if (success) {
    message.success(t("删除成功"));
    reload();
  }
};
/**取消 */
const handleCancel = (record: QueryMenuFunctionResult) => {
  if (!record.id) {
    state.list.shift();
  }
  reset();
};
watch(
  () => props.model,
  (model) => {
    if (model) {
      params.menuId = model.menuId;
      reload();
    }
  }
);
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 8px;
}
</style>
